<script setup>
import { artGetChannelsService,artDelChannelService } from '@/api/article'
import {ref} from 'vue'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
 import ChannelEdit from './components/ChannelEdit.vue' 
import { ElMessage } from 'element-plus'
const channelList=ref([])
const loading = ref(false)
const dialog = ref()

const getChannelList =async()=>{
    loading.value=true
    const res =await artGetChannelsService()
     channelList.value=res.data.data
     loading.value=false
     console.log( channelList.value)
}

const onEditChannel =(row)=>{
    console.log(row)
    dialog.value.open(row)
}
const onDelChannel = async(row)=>{
   await ElMessageBox.confirm('你确认删除该分类信息吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await artDelChannelService(row.id)
  ElMessage({ type: 'success', message: '删除成功' })
  getChannelList()
}
const onAddChannel = () => {
  dialog.value.open({})
}
const onSuccess=()=>{
    //刷新页面
    getChannelList()
}

 getChannelList()
</script>

<template>
  <page-container title="文章分类" >
    <template #extra>
      <el-button type="primary" @click="onAddChannel"> 添加分类 </el-button>
    </template>

   <el-table :data="channelList" style="width: 100%" v-loading="loading">
        <el-table-column label="序号" width="100" type="index"></el-table-column>
        <el-table-column  label="分类名称" prop="cate_name" ></el-table-column>
        <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
        <el-table-column label="操作"  width="150">
            <!-- 添加两个按钮(自定义列)一个编辑,一个删除 -->
           <template #default="{row}">
            <el-button @click="onEditChannel(row)"
            type="primary" :icon="Edit" circle plain
            ></el-button>
           <el-button @click="onDelChannel(row)"
            type="danger" :icon="Delete" circle plain
            ></el-button>
           </template>
        </el-table-column>

        <!-- 空状态显示 -->
        <template>
         <el-empty description="没有数据" />
         </template>
   </el-table>

<!-- 弹窗 -->
<channel-edit ref="dialog" @success="onSuccess"></channel-edit>
  </page-container>
</template>